<template>
  <div class="qh-home-hot">
    <div class="cates">
      <span
        v-for="item in cates"
        :key="item.id"
        v-text="item.cate_txt"
        @click="changecate(item)"
        :class="{ 'active ': item.cate === cate_id }"
      ></span>
    </div>
    <div>
      <!-- 热榜列表 -->
      <div v-for="item in list" :key="item.id">
        <h6 v-text="item.title" @click="skipTo(item)"></h6>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      cates: [
        { id: 1, cate: "", cate_txt: "全站" },
        { id: 2, cate: "science", cate_txt: "科学" },
        { id: 3, cate: "digital", cate_txt: "数码" },
      ],
      list: [
        {
          id: 1,
          title: "如何看待京沪两地法学生起诉苹果不送充电器？用户有可能胜诉吗？",
        },
        {
          id: 2,
          title:
            "如何看待上海闵行区公务员招录，要求海外硕士学位的学制最少为 2 年？",
        },
        {
          id: 3,
          title:
            "清华学生晒 1 周作业喊救命，写了五十页全英文，现在大学生的作业量都这么多吗？",
        },
      ],
    };
  },

  computed: {
    cate_id() {
      return this.$route.query.list;
    },
  },
  watch: {
    cate_id() {
      this.list = this.cates.find((e) => e.cate == this.cate_id).cate_txt;
    },
  },
  methods: {
    changecate(c) {
      // 通过get请求 转到相应地址
      console.log("c", c);
      this.$router.push(`${this.$route.path}?list=${c.cate}`);
    },
    skipTo(item) {
      this.$router.push(`/hot/${item.id}`);
    },
  },
};
</script>


<style>
/* .cates {
} */
.cates {
  /* display: flex; */
  /* flex-wrap: wrap; */
}
.cates span {
  flex: 0;
  margin: 4px;
  width: 60px;
  height: 30px;
  background-color: rgb(246, 246, 246);
  /* -webkit-box-sizing: border-box; */
  margin-top: 10px;
  padding: 5px 20px;
  border-radius: 2px;
  font-size: 14px;
  line-height: 30px;
  color: #646464;
  cursor: pointer;
}
.cates span.active {
  background-color: rgb(229, 239, 255);
  color: #06f;
}
</style>